---
import PageLayout from "@/layouts/Base.astro";
import Weather from "@/components/now/Weather.astro";
import { POSTS_API } from "@/data/constants";
import { createMarkdownRenderer } from "@/utils";

export const prerender = false;

const md = await createMarkdownRenderer();

const { slug } = Astro.params;

if (!slug) {
	return Astro.redirect("/now");
}

interface PostDetail {
	short_id: string;
	title: string | null;
	slug: string;
	alias: string | null;
	canonical_url: string | null;
	published_date: string | null;
	meta_description: string | null;
	meta_image: string | null;
	lang: string;
	tags: string | null;
	content: string;
	created_at: string;
	updated_at: string;
	weather: string | null;
}

let title: string | null = "Post";
let description = "A post";
let contentHTML = "";
let publishedAt = "";
let errorMessage = "";
let weatherRaw = "";
let isError = false;

try {
	const res = await fetch(`${POSTS_API}/posts/${encodeURIComponent(slug)}`);

	if (res.status === 404) {
		Astro.response.status = 404;
		isError = true;
		title = "Not Found";
		errorMessage = "The post you're looking for doesn't exist.";
	} else if (!res.ok) {
		throw new Error(`HTTP ${res.status}`);
	} else {
		const post = (await res.json()) as PostDetail;
		title = post.title;
		description =
			post.meta_description ||
			(post.content ? post.content.slice(0, 160) : description);
		publishedAt = post.published_date
			? new Date(post.published_date).toLocaleDateString()
			: "";
		contentHTML = md.render(post.content || "");
		weatherRaw = post.weather || "";
	}
} catch (err) {
	console.error("Error fetching post:", err);
	Astro.response.status = 500;
	isError = true;
	title = "Error";
	errorMessage = "Something went wrong while loading this post.";
}

const meta = {
	title: title || "Post",
	description,
};
---

<PageLayout meta={meta}>
	<article>
		{isError ? (
			<>
				<h1 class="title mb-4">{title}</h1>
				<p class="text-zinc-400 mb-8">{errorMessage}</p>
				<a class="style-link" href="/now">&larr; Back to Now</a>
			</>
		) : (
			<>
				{title && <h1 class="title mb-2">{title}</h1>}
				<div class="flex text-sm text-zinc-400 items-center gap-x-3 gap-y-1 flex-wrap">
					<time>{publishedAt}</time>
					{weatherRaw && <Weather leadingSeparator weather={weatherRaw} />}
				</div>
				<div class="prose prose-invert max-w-none my-4">
					<Fragment set:html={contentHTML} />
				</div>
				<div class="mt-12 flex items-center justify-between">
					<a class="style-link" href="/now">&larr; Now</a>
          <div class="flex gap-6">
            <button
              id="share-btn"
              class="text-sm text-zinc-500 hover:text-zinc-700 transition-colors"
            >
              Share
            </button>
              <a 
                class="text-sm text-zinc-500 hover:text-zinc-700 transition-colors"
                href={ `mailto:contact@stevedylan.dev?subject=${'Re: ' + title}` }
                >
                Reply via Email
              </a>
          </div>
				</div>
			</>
		)}
	</article>
</PageLayout>

<script>
	const btn = document.getElementById("share-btn");
	if (btn) {
		btn.addEventListener("click", () => {
			const url = window.location.href;
			navigator.clipboard
				.writeText(url)
				.then(() => {
					const originalText = btn.textContent;
					btn.textContent = "Copied!";
					setTimeout(() => {
						btn.textContent = originalText;
					}, 2000);
				})
				.catch((err) => {
					console.error("Failed to copy URL:", err);
					alert("Failed to copy URL");
				});
		});
	}
</script>